<html>

<head>
<meta charset="UTF-8">
<title>向左向右移动图片</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
	<div align="center" id="img_list">
		<a order="1" ><span id="left1"  class="leftMove" onclick="leftMove(this)">左移</span><img src="1.jpg" style="height: 600px; width: 200px" order="1"/><span id="right1" class="rightMove"  onclick="rightMove(this)">右移</span>  </a>
		<a order="2" ><span id="left2"  class="leftMove" onclick="leftMove(this)">左移</span><img src="2.jpg" style="height: 600px; width: 200px" order="2"/><span id="right2" class="rightMove"  onclick="rightMove(this)">右移</span>    </a>
		<a order="3" ><span id="left3"  class="leftMove" onclick="leftMove(this)">左移</span><img src="3.jpg" style="height: 600px; width: 200px" order="3"/><span id="right3"  class="rightMove"  onclick="rightMove(this)">右移</span>    </a>
		<a order="4" ><span id="left4"  class="leftMove" onclick="leftMove(this)">左移</span><img src="4.jpg" style="height: 600px; width: 200px" order="4"/><span id="right4" class="rightMove"  onclick="rightMove(this)">右移</span>    </a>
		<a order="5" ><span id="left5"  class="leftMove" onclick="leftMove(this)">左移</span><img src="5.jpg" style="height: 600px; width: 200px" order="5"/><span id="right5" class="rightMove"  onclick="rightMove(this)">右移</span>   </a>
		<a order="6" ><span id="left6"  class="leftMove" onclick="leftMove(this)">左移</span><img src="6.jpg" style="height: 600px; width: 200px" order="6"/><span id="right6"  class="rightMove"  onclick="rightMove(this)">右移</span>   </a>
		<a order="7" ><span id="left7"  class="leftMove" onclick="leftMove(this)">左移</span><img src="7.jpg" style="height: 600px; width: 200px" order="7"/><span id="right7"  class="rightMove"  onclick="rightMove(this)">右移</span>   </a>
		</div>
	<script>
	jQuery(document).ready(function() {
		
	});
	function leftMove(obj){
		if (parseInt($(obj).parent().attr("order")) == 1) {
			return;
		}
		modern = parseInt($(obj).parent().attr("order"));
		pre = modern - 1;
		modernhtml = $(obj).parent().html();
		prehtml = $(obj).parent().parent().find("a[order='" + pre + "']").html();
		$(obj).parent().parent().find("a[order='" + pre + "']").html(modernhtml);
		$(obj).parent().parent().find("a[order='" + modern + "']").html(prehtml);
		$(obj).parent().parent().find("a[order='" + pre + "']").attr("order",""+modern);
		$(obj).parent().parent().find("a[order='" + modern + "']").attr("order",""+pre);
	}
	function rightMove(obj){
		if (parseInt($(obj).parent().attr("order")) == $(obj).parent().parent().children('a').length) {
			return;
		}
		modern = parseInt($(obj).parent().attr("order"));
		next = modern +1;
		modernhtml = $(obj).parent().html();
		nexthtml = $(obj).parent().parent().find("a[order='" + next + "']").html();
		$(obj).parent().parent().find("a[order='" + next + "']").html(modernhtml);
		$(obj).parent().parent().find("a[order='" + modern + "']").html(nexthtml);
		$(obj).parent().parent().find("a[order='" + next + "']").attr("order",""+modern);
		$(obj).parent().parent().find("a[order='" + modern + "']").attr("order",""+next);
	}

	</script>
</body>

</html>
